<template>
  <view class="user-info">
    <!-- <view class="header">
      <text>健康常识小测验</text>
    </view> -->
    <view class="basic-form">
      <text class="title">基本信息</text>
      <form class="form">
        <view class="form-item">
          <label class="form-label">真实姓名</label>
          <ui-input
            v-model="formData.name"
            :className="'form-control'"
            :validator="
              (val) => {
                return val ? true : false;
              }
            "
            type="text"
          />
        </view>
        <view class="form-item">
          <label class="form-label">性别</label>
          <view class="radio-group">
            <button
              size="mini"
              :class="formData.sex === 'MALE' ? 'active' : ''"
              @tap="handleSexFormControlChange('MALE')"
            >
              男
            </button>
            <button
              size="mini"
              :class="formData.sex === 'FEMALE' ? 'active' : ''"
              @tap="handleSexFormControlChange('FEMALE')"
            >
              女
            </button>
          </view>
        </view>
        <view class="form-item">
          <label class="form-label">年龄</label>
          <ui-input v-model="formData.age" class="form-control" type="number" />
        </view>
        <view class="form-item">
          <label class="form-label">身高</label>
          <ui-input
            v-model="formData.height"
            class="form-control"
            type="digit"
          />
          <text class="form-unit">厘米</text>
        </view>
        <view class="form-item">
          <label class="form-label">体重</label>
          <ui-input
            v-model="formData.weight"
            class="form-control"
            type="digit"
          />
          <text class="form-unit">公斤</text>
        </view>
      </form>
    </view>
    <button type="primary" class="next" @tap="handleNext">下一步</button>
  </view>
</template>

<script>
import "./index.less";
import Taro from "@tarojs/taro";
import TabBar from "../components/TabBar.vue";
import UiInput from "../components/ui-input/ui-input.vue";
import { auth } from "../../services/auth-service";
import {
  getCustomerInfo,
  updateCustomerInfo,
} from "../../services/user-service";

export default {
  components: {
    uiInput: UiInput,
  },
  data() {
    return {
      formData: {
        name: "", // 名字
        sex: "", // 性别
        age: "", // 年龄
        height: "", //身高
        weight: "", // 体重
      },
    };
  },
  methods: {
    async handleNext() {
      const res = await updateCustomerInfo({
        ...this.formData,
        mobile: this.$store.state.user.userInfo.mobile,
        avatarUrl: this.$store.state.user.userInfo.avatarUrl,
        nickName: this.$store.state.user.userInfo.nickName,
      });
      this.$instance = Taro.getCurrentInstance();
      const type = this.$instance.router.params.type;
      if (res.data.code === "success") {
        if (type) {
          Taro.navigateTo({
            url: `/pages/health-questionnaire/questionnaire/index?type=${type}`,
          });
        } else {
          Taro.navigateTo({
            url: "/pages/health-questionnaire/knowledge-test/index",
          });
        }
      }
    },
    handleSexFormControlChange(value) {
      this.$set(this.formData, "sex", value);
    },
    setDefaultFormData(formValue) {
      this.formData = formValue;
    },
  },
  async created() {
    const customerInfo = await getCustomerInfo();
    if (customerInfo) {
      this.setDefaultFormData({
        name: customerInfo?.name,
        sex: customerInfo?.sex,
        age: customerInfo?.age,
        height: customerInfo?.bodyProfile.height,
        weight: customerInfo?.bodyProfile.weight,
      });
    }
  },
};
</script>
